<template>
  <aside class="side-nav">
    <h3>工艺管控</h3>
    <ul>
      <li :class="{ active: $route.path === '/' }">
        <router-link to="/"><i class="fas fa-chart-line"></i> 首页</router-link>
      </li>
      <!-- <li :class="{ active: $route.path === '/process-flow' }">
        <router-link to="/process-flow"><i class="fas fa-stream"></i> 工艺流程</router-link>
      </li>
      <li :class="{ active: $route.path === '/process-indicators' }">
        <router-link to="/process-indicators"><i class="fas fa-cogs"></i> 工艺指标监测</router-link>
      </li> -->
      <li :class="{ active: $route.path === '/anomaly-detection' }">
        <router-link to="/anomaly-detection"
          ><i class="fas fa-chart-line"></i> 超实时预测</router-link
        >
      </li>
      <!-- <li :class="{ active: $route.path === '/fault-detection' }">
        <router-link to="/fault-detection"
          ><i class="fas fa-exclamation-triangle"></i> 故障检测</router-link
        >
      </li> -->
      <li :class="{ active: $route.path === '/smart-assistant' }">
        <router-link to="/smart-assistant"><i class="fas fa-robot"></i> 智能助手</router-link>
      </li>
      <li :class="{ active: $route.path === '/knowledge-graph' }">
        <router-link to="/knowledge-graph"><i class="fas fa-sitemap"></i> 知识图谱</router-link>
      </li>
      <li :class="{ active: $route.path === '/fault-info' }">
        <router-link to="/fault-info"><i class="fas fa-list-alt"></i> 故障列表</router-link>
      </li>
    </ul>
  </aside>
</template>

<script setup>
// 不需要 emits 了，因为导航由 router-link 处理
import { useRoute } from 'vue-router' // 导入 useRoute 钩子

const route = useRoute() // 获取当前路由实例，用于判断激活状态
</script>
